<template>
  <div class="list-div">
    <el-row>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="文本介绍" label-width="80px" prop="content">
          <el-input type="textarea" :rows="7" v-model="form.content"></el-input>
        </el-form-item>

        <el-form-item label="地图图片" prop="img">
          <ImgUpload @changeFiles="form.fileList= $event" :imgs="form.fileList" :limit="1"
                     @removeFile="removeFile($event)"
                     @uploadSuccess="uploadSuccess($event)"
                     lable=""/>

        </el-form-item>
        <el-form-item>
          <el-button class="btnAdd" type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-row>



  </div>

</template>

<script>
import ImgUpload from './ImgUpload'
export default {
  components:{
    ImgUpload
  },
  name: 'Introduce',
  data () {
    return {
      showIconDialog:false,
      showIcon:null,
      form: {
        fileList:null,
        id:'',
        content: '',
        img: '',
      },
      rules: {
        content: [
          { required: true, message: '请输入介绍', trigger: 'blur' },
        ],
        img: [
          { required: true, message: '请上传地图图片', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    showFileImg(){
      this.showIconDialog=true
      this.showIcon = this.form.img
    },

    removeFile(file){
      this.form.img = null
    },
    uploadSuccess(file){
      this.form.img = file.url
    },

    getData(){
      this.$axios.get('/admin/introduce/info', {
        params: {
        }
      }).then(r => {
        let res = r.data
        if (res.code !== 1) {
          this.$message.error(res.msg)
          return
        }
        if ( res.data){
          this.form = res.data
          this.form.fileList=[]
          this.form.fileList.push({url:this.form.img})
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/admin/introduce/edit'

          this.$axios.post(url, {
            id: this.form.id,
            content:this.form.content,
            img:this.form.img,
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.getData()
          })
        } else {
          return false;
        }
      });
    },


    init () {
      this.getData()
    }
  },
  mounted: function () {
  },
  created: function () {
    this.init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>
